///////////////////////////////////////////////////
////            Animation Timer                  //
///////////////////////////////////////////////////

/*
    See function TestAnim() for ref.

    Global Vars For animation timer     
    To show DMG Count Down  */

// arrays of text elemnts, to start count down in the max index , after finish move to next elm
// used when killing more then one soldier!!

var ArrayStartIndex = -1;        // Index Of Array Size (Start Index Animation)

var Animation_Init_Value=   [];   // ARR count down from x 
var Animation_Min_Value =   [];   // ARR count dwon to x
var AnimationElement    =   [];   // ARR show count in element

var AnimationStopEventFunction; // function Ref to be called after timer stop
var AnimationVariable;          // timer - used : setInterval(function(){AnimationTimerFunction()},100);


function AnimationTimerFunction() {
    // check if we have remain anim to show in array
    if (ArrayStartIndex >= 0 ) {
        if ( Animation_Init_Value[ArrayStartIndex] > Animation_Min_Value[ArrayStartIndex]) {
            Animation_Init_Value[ArrayStartIndex] = Animation_Init_Value[ArrayStartIndex] - 1;
            AnimationElement[ArrayStartIndex].innerHTML = Animation_Init_Value[ArrayStartIndex];
        }
        else {
            ArrayStartIndex = ArrayStartIndex - 1;
            if (ArrayStartIndex < 0 ) {
                //Stop Timer
                clearInterval(AnimationVariable);
                AnimationStopEventFunction();       //call the ref funtion IN END
            }
        }        
    }

}

// called after Initialize the following global vars:
//  Animation_Init_Value , Animation_Min_Value , AnimationElement , AnimationStopEventFunction
function StartAnimationTimer() {
    Animation_Init_Value.reverse();
    Animation_Min_Value.reverse();
    AnimationElement.reverse();
    AnimationVariable = setInterval(function(){AnimationTimerFunction();},100);
}

/*           Example of use           */
//function TestAnim() {
//    Animation_Init_Value[1] = 150;
//    Animation_Min_Value[1] = 100;
//    AnimationElement[1] = document.getElementById("p2_tower_1_txt");
//    
//    Animation_Init_Value[0] = 150;
//    Animation_Min_Value[0] = 100;
//    AnimationElement[0] = document.getElementById("p2_tower_2_txt");    
//    
//    ArrayStartIndex = 1;
//    
//    
//    AnimationStopEventFunction = function() {alert("Finished!");};
//    StartAnimationTimer();
//}





////////////////////////////////////////////////////////////////
///                   dragged card animation            ////////
////////////////////////////////////////////////////////////////

function ShowCardDragAnimation( elem, x, y ) {
    var left = parseInt( window.getComputedStyle( elem, null ).getPropertyValue( 'left' ) , 10 ),
        top = parseInt(  window.getComputedStyle( elem, null ).getPropertyValue( 'top' )  , 10 ),
        dx = left - x,
        dy = top - y,
        i = 1,
        count = 20,
        delay = 20;
    
    function loop() {
        if ( i >= count ) { elem.innerHTML=""; return; }
        i += 1;
        elem.style.left = ( left - ( dx * i / count ) ).toFixed( 0 ) + 'px';
        elem.style.top = ( top - ( dy * i / count ) ).toFixed( 0 ) + 'px';
        setTimeout( loop, delay );
    }
    
    loop();
}